<template>
    <div class="type-nav">
        <div class="container">
            <div @mouseleave="leaveShow" @mouseenter="enterShow">
                <h2 class="all">指导分类</h2>
<!--                过渡动画-->
                <transition name="sort">
                    <div class="sort" v-show="show">
                        <!--                    利用事件的委派和路由的导航-->
                        <div class="all-sort-list2">
                            <div class="item">
                                <h3 @mouseenter="changeIndex" @mouseleave="leaveIndex">
                                    <a href="">科普</a>
                                </h3>
                                <h3>
                                    <a href="">婚恋/两性</a>
                                </h3>
                                <h3>
                                    <a href="">学业/生活</a>
                                </h3>
                                <h3>
                                    <a href="">家庭关系</a>
                                </h3>
                                <h3>
                                    <a href="">人机社交</a>
                                </h3>
                                <h3>
                                    <a href="">自我察觉</a>
                                </h3>
                                <h3>
                                    <a  @click="goSearch">更多</a><!--@click='goSearch'-->
                                </h3>
                            </div>
                        </div>
                    </div>
                </transition>
            </div>
            <nav class="nav">
                <div class="box1">
                    <a @click="goSearch">解压商城</a>
                    <a @click="goBook">课程</a>
                    <a>测试</a>
                    <a>FM</a>
                </div>
                <div class="box2">
                    <a href="###">心理咨询</a>
                    <a href="###">加入我们</a>
                </div>
            </nav>
        </div>
    </div>
</template>

<script>
    //引入方式：是把lodash全部功能函数引入
    import throttle from 'lodash/throttle';
    export default {
        name: "TypeNav",
        data(){
            return{
                show:true
            }
        },
        //组件挂载完毕，可以向服务器发送请求
        mounted() {
            console.log('typeNav挂载完毕')
            if (this.$route.path!='/home'){
                this.show =false
            }
            //通知Vuex发送请求，获取数据，存储于仓库但只能怪
            //this.$store.dispatch('categoryList');
        },
        computed:{
          /*  ...mapState({
                categoryList:state=>state.home.categoryList
            })*/
        },
        methods:{
            //鼠标进入修改响应式数据currentIndex属性
                //index：鼠标移上某一个一级分类的元素索引值
            changeIndex:throttle(function (index) {
                this.currentIndex =index;
            },50),
            //一级分类鼠标移除的事件回调
            leaveIndex(){
                //鼠标移出currentIndex，变为-1
                //console.log('888')
                this.currentIndex=-1;
            },
           //可以跳转成功到search
            goSearch() {
                let location={name:'search'};
                //进行路由跳转的方法

                 if (this.$route.params){
                     location.params =this.$route.params;
                     this.$router.push(location);
                 }
            },
            //可以跳转成功到book
            goBook() {
                let location={name:'book'};
                //进行路由跳转的方法

                if (this.$route.params){
                    location.params =this.$route.params;
                    this.$router.push(location);
                }
            },

            //当鼠标移入时。让商品分类列表进行展示
            enterShow(){
                if (this.$route.path!='/home'){
                    this.show=true
                }
            },
            leaveShow(){
                if (this.$route.path!='/home'){
                    this.show =false
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .type-nav {
        border-bottom: 2px solid lightskyblue;

        .container {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            position: relative;

            .all {
                width: 210px;
                height: 45px;
                background-color: lightskyblue;
                line-height: 45px;
                text-align: center;
                color: #fff;
                font-size: 14px;
                font-weight: bold;
            }

            .nav {
                .box1{
                    float: left;
                    display: inline-block;
                    a {
                        height: 45px;
                        margin: 0 22px;
                        line-height: 45px;
                        font-size: 16px;
                        color: #333;
                    }
                }
                .box2{
                    float: right;
                    display: inline-block;
                    a {
                        height: 45px;
                        margin: 0 22px;
                        line-height: 45px;
                        font-size: 16px;
                        color: #333;
                    }
                }

            }

            .sort {
                position: absolute;
                left: 0;
                top: 55px;
                width: 210px;
                height: 428px;
                position: absolute;
                background: #e9eae9;
                z-index: 999;

                .all-sort-list2 {
                    .item {
                        h3 {
                            line-height: 38px;
                            font-size: 14px;
                            font-weight: 400;
                            overflow: hidden;
                            padding: 0 20px;
                            margin: 0;

                            &:hover{
                                background: #d5eeee;
                            }
                            a {
                                color: #333;
                            }

                        }

                        .item-list {
                            display: none;
                            position: absolute;
                            width: 734px;
                            min-height: 460px;
                            background: #f7f7f7;
                            left: 210px;
                            border: 1px solid #ddd;
                            top: 0;
                            z-index: 9999 !important;

                            .subitem {
                                float: left;
                                width: 650px;
                                padding: 0 4px 0 8px;
                            }
                        }
                    }
                }
            }
            //过渡动画的样式
            //过渡动画开始状态（进入）
            .sort-enter {
                height: 0px;
            }
            // 过渡动画结束状态（进入）
            .sort-enter-to {
                height: 428px;
            }
            // 定义动画时间、速率
            .sort-enter-active {
                transition: all 0.5s linear;
            }
        }
    }
</style>
